<template>
  <div>
    <section class="haruyuki-bg-color-white">
      <el-alert
        v-if="basicData.auditResult"
        title="审核备注："
        :description="basicData.auditResult"
        type="error">
      </el-alert>
      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-user"></i
          ><span class="haruyuki-ml-6">{{ posTitle.basicTitle }}</span>
        </div>
        <!-- <el-button
          type="primary"
          icon="el-icon-edit"
          size="small"
          v-if="isStartNode"
          @click="getBasicEdit(basicData)"
          >修改</el-button
        > -->
      </div>
      <div class="haruyuki-content">
        <el-row :gutter="20">
          <el-col :span="6">
            <span>租户名称：{{ basicData.tenantName }}</span>
          </el-col>
          <el-col :span="6">
            <span>租户类型：{{ basicData.tenantTypeName }}</span>
          </el-col>
          <el-col :span="6">
            <span>联系人：{{ basicData.linkman }}</span>
          </el-col>
          <el-col :span="6">
            <span>联系电话：{{ basicData.contactNumber }}</span>
          </el-col>
          <el-col :span="6">
            <span
              >所在区域：{{ basicData.provinceName }}/{{
                basicData.cityName
              }}/{{ basicData.areaName }}</span
            >
          </el-col>
          <el-col :span="6">
            <span>联系地址：{{ basicData.address }}</span>
          </el-col>
          <el-col :span="6">
            <span>邮箱：{{ basicData.email }}</span>
          </el-col>
          <el-col :span="6">
            <span>合作状态：{{ basicData.isCooperateName }}</span>
          </el-col>
          <el-col :span="6">
            <span>分润状态：{{ basicData.profitStateName }}</span>
          </el-col>
          <el-col :span="6">
            <span>合同状态：{{ basicData.cooperateStateName }}</span>
          </el-col>
          <el-col :span="6">
            <span>到期时间：{{ basicData.expireTime }}</span>
          </el-col>
          <el-col :span="6">
            <span>异常状态原因：{{ basicData.exceptionMsg }}</span>
          </el-col>
          <el-col :span="6">
            <span>绑定域名：{{ basicData.domain }}</span>
          </el-col>
          <el-col :span="6" v-if="basicData.remark">
            <span>备注：{{ basicData.remark }}</span>
          </el-col>
        </el-row>
      </div>
      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-postcard"></i
          ><span class="haruyuki-ml-6">{{ posTitle.mainTitle }}</span>
        </div>
        <!-- <el-button
          type="primary"
          icon="el-icon-edit"
          size="small"
          v-if="isStartNode"
          @click="getMainEdit(mainData)"
          >修改</el-button
        > -->
      </div>
      <div class="haruyuki-content">
        <el-row :gutter="20">
          <el-col :span="24">
            <span>认证照片：</span>
          </el-col>
          <el-col :span="3">
            <div class="haruyuki-image-preview">
              <div class="haruyuki-image">
                <el-image
                  style="width: 100%; height: 100%"
                  :src="mainData.roaLicenseImageUrl"
                  z-index="5000"
                  :preview-src-list="[mainData.roaLicenseImageUrl]"
                  fit="contain"
                >
                </el-image>
                <span class="haruyuki-text">营业执照照片</span>
              </div>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="haruyuki-image-preview">
              <div class="haruyuki-image">
                <el-image
                  style="width: 100%; height: 100%"
                  :src="mainData.roaCardPositiveUrl"
                  z-index="5000"
                  :preview-src-list="[mainData.roaCardPositiveUrl]"
                  fit="contain"
                >
                </el-image>
                <span class="haruyuki-text">法人身份证人像面</span>
              </div>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="haruyuki-image-preview">
              <div class="haruyuki-image">
                <el-image
                  style="width: 100%; height: 100%"
                  :src="mainData.roaCardBackUrl"
                  z-index="5000"
                  :preview-src-list="[mainData.roaCardBackUrl]"
                  fit="contain"
                >
                </el-image>
                <span class="haruyuki-text">法人身份证国徽面</span>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <span>公司名称：{{ mainData.compName }}</span>
          </el-col>
          <el-col :span="6">
            <span>营业执照编号：{{ mainData.roaLicenseNo }}</span>
          </el-col>
          <el-col :span="6">
            <span>营业执照有效期：{{ mainData.roaLicenseTime }}</span>
          </el-col>
          <el-col :span="6">
            <span>法人名称：{{ mainData.roaName }}</span>
          </el-col>
          <el-col :span="6">
            <span>身份证号：{{ mainData.roaCardNo }}</span>
          </el-col>
          <el-col :span="6">
            <span>法人身份证有效期：{{ mainData.roaCardTime }}</span>
          </el-col>
        </el-row>
      </div>
      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-bank-card"></i
          ><span class="haruyuki-ml-6">{{ posTitle.cardTitle }}</span>
        </div>
        <!-- <el-button
          type="primary"
          icon="el-icon-edit"
          size="small"
          v-if="isStartNode"
          @click="getCardEdit(cardData)"
          >修改</el-button
        > -->
      </div>
      <div class="haruyuki-content">
        <el-row :gutter="20">
          <el-col :span="24">
            <span>认证照片：</span>
          </el-col>
          <el-col :span="3">
            <div class="haruyuki-image-preview">
              <div class="haruyuki-image">
                <el-image
                  style="width: 100%; height: 100%"
                  :src="cardData.robCardPublicImgUrl"
                  z-index="5000"
                  :preview-src-list="[cardData.robCardPublicImgUrl]"
                  fit="contain"
                >
                </el-image>
                <span class="haruyuki-text">对公开户证明</span>
              </div>
            </div>
          </el-col>
          <!-- <el-col :span="3">
                <div class="haruyuki-image-preview">
                  <div class="haruyuki-image">
                      <el-image
                      style="width: 100%; height: 100%"
                      :src="cardForm.robBankPositiveUrl"
                      z-index="5000"
                      :preview-src-list="[cardForm.robBankPositiveUrl]"
                      fit="contain"
                      >
                      </el-image>
                      <span class="haruyuki-text">结算卡正面</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="haruyuki-image-preview">
                  <div class="haruyuki-image">
                      <el-image
                      style="width: 100%; height: 100%"
                      :src="cardForm.robBankBackUrl"
                      z-index="5000"
                      :preview-src-list="[cardForm.robBankBackUrl]"
                      fit="contain"
                      >
                      </el-image>
                      <span class="haruyuki-text">结算卡反面</span>
                  </div>
                </div>
              </el-col> -->
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <span>开户行：{{ cardData.robBank }}</span>
          </el-col>
          <el-col :span="6">
            <span>开户支行：{{ cardData.robBankBranch }}</span>
          </el-col>
          <el-col :span="6">
            <span>开户名称：{{ cardData.robBankName }}</span>
          </el-col>
          <el-col :span="6">
            <span>银行账号：{{ cardData.robBankNo }}</span>
          </el-col>
          <el-col :span="6" v-if="cardData.bankMobile">
            <span>银行预留手机号：{{ cardData.bankMobile }}</span>
          </el-col>
        </el-row>
      </div>

      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-cpu"></i
          ><span class="haruyuki-ml-6">{{ posTitle.aisleTitle }}</span>
        </div>
        <!-- <el-button
          type="primary"
          icon="el-icon-edit"
          size="small"
          v-if="isStartNode"
          @click="getAisleEdit(aisleList)"
          >修改</el-button
        > -->
      </div>
      <div class="haruyuki-content">
        <el-row :gutter="20">
          <el-col :span="6" v-for="(item, index) in aisleList" :key="index">
            <div @click.stop="getPolicyEdit(item.aisleCode)">
              <span class="haruyuki-color-primaryblue cursor-pointer">{{ item.aisleName }}</span>
              <span class="haruyuki-color-silverGray haruyuki-size-14" v-if="item.isDefault == '1'">（正在使用）</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </section>

    <el-dialog
      :title="'编辑' + dialogText"
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
    >
      <template>
        <div class="el-dialog-div" v-show="active == 0">
          <basicForm :basicForm="basicForm" ref="toBasicForm" />
        </div>
      </template>
      <template>
        <div v-if="active == 1">
          <mainForm :mainForm="mainForm" ref="toMainForm" />
        </div>
      </template>
      <template>
        <div v-if="active == 2">
          <cardForm :cardForm="cardForm" ref="toCardForm" />
        </div>
      </template>
      <template>
        <div v-if="active == 3">
          <el-transfer
            class="haruyuki-flex-center haruyuki-width-100"
            filterable
            :filter-method="filterMethod"
            filter-placeholder="请输入通道名称"
            :button-texts="['取消分配', '分配通道']"
            :titles="['未分配通道', '已分配通道']"
            v-model="aisleAllot"
            :data="aisleData"
          >
          </el-transfer>
        </div>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button
          icon="el-icon-check"
          size="small"
          type="primary"
          @click.stop="handleSubmit"
          >提 交</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      v-if="policyVisible"
      :title="posTitle.policyTitle"
      append-to-body
      :visible.sync="policyVisible"
    >
      <template>
        <policyForm :oem="oem" :aisleCode="aisleCode" ref="toPolicyForm" />
      </template>
      <!-- <span slot="footer" class="dialog-footer" v-if="isStartNode">
        <el-button
          icon="el-icon-check"
          size="small"
          type="primary"
          @click.stop="getPolicyEditForm"
          >提 交</el-button
        >
      </span> -->
    </el-dialog>
  </div>
</template>

<script>
import {
  getTenantDetail,
  update,
  authUpdate,
  bankUpdate,
  aisleUpdate,
  oemPolicyUpdate,
  getAisleAllList,
} from "@/api/system/tenant";
import basicForm from "@/components/rb-oem/basic-form";
import mainForm from "@/components/rb-oem/main-form";
import cardForm from "@/components/rb-oem/card-form";
import policyForm from "@/components/rb-oem/policy-form";

export default {
  components: {
    basicForm,
    mainForm,
    cardForm,
    policyForm,
  },
  props: {
    tenantId: {
      type: String,
      required: true
    },
    isStartNode: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      posTitle: {
        basicTitle: "OEM信息",
        mainTitle: "实名信息",
        cardTitle: "结算卡信息",
        aisleTitle: "支付通道",
        policyTitle: "通道分润配置",
      },
      dialogVisible: false,
      dialogText: "",
      active: 0,
      policyVisible: false,
      oem: {},
      basicData: {
        tenantName: "",
        tenantType: "",
        linkman: "",
        contactNumber: "",
        provinceCityArea: "",
        address: "",
        email: "",
        isCooperate: "",
        profitState: "",
        cooperateState: "",
        exceptionMsg: "",
        domain: "",
        backgroundUrl: "",
      },
      mainData: {},
      cardData: {},
      basicForm: {},
      mainForm: {},
      cardForm: {},
      aisleList: [], //通道列表 显示
      aisleAllot: [], //通道分配 绑定value
      aisleData: [], //通道分配 数据
      aisleCode: "", //点击赋值 通道编号
    };
  },
  computed: {
    exhibition() {
      return (val) => {
        if (val == "" || val == "-1") {
          return (val = 0);
        } else {
          return val;
        }
      };
    },
  },
  created() {
    this.infoData(this.tenantId);
  },
  mounted() {},
  methods: {
    /* 页面加载 初始化请求详情接口 */
    infoData(tenantId) {
      getTenantDetail(tenantId).then((res) => {
        this.oem = res.data.data.tenantUserInfoVO;
        res.data.data.baseInfo.tenantType = res.data.data.baseInfo.tenantType + "";
        res.data.data.baseInfo.isCooperate = res.data.data.baseInfo.isCooperate + "";
        res.data.data.baseInfo.cooperateState = res.data.data.baseInfo.cooperateState + "";
        res.data.data.baseInfo.profitState = res.data.data.baseInfo.profitState + "";
        this.basicData = res.data.data.baseInfo;
        this.basicData.provinceCityArea = [
          this.basicData.province,
          this.basicData.city,
          this.basicData.area,
        ];

        this.mainData = res.data.data.authInfo;
        this.cardData = res.data.data.bankInfo;
        this.aisleList = res.data.data.aisleInfos;
      });

      
      // getAisleOemList(this.oem.tenantId, this.oem.userNo, this.oem.userType).then(res => {
      //   let aisleAllots = res.data.data.records;
      //   aisleAllots.forEach((item) => {
      //     this.aisleAllot.push(item.aisleCode);
      //   });
      // });
    },
    /* OEM编辑弹框 提交处理 */
    handleSubmit() {
      const _this = this;
      switch (_this.active) {
        case 0:
          _this.getBasicEditForm();
          break;
        case 1:
          _this.getMainEditForm();
          break;
        case 2:
          _this.getCardEditForm();
          break;
        case 3:
          _this.getAisleEditForm();
          break;
      }
    },
    handleClose(done) {
      this.emptyForm();
      done();
    },
    emptyForm() {
      this.$refs["toBasicForm"].$refs["basicForm"].resetFields();
      // this.$refs['toMainForm'].$refs['mainForm'].resetFields()
      // this.$refs['toCardForm'].$refs['cardForm'].resetFields()
      this.aisleData = [];
      this.aisleAllot = [];
    },
    /* 点击基础信息 处理回显数据 */
    getBasicEdit(basicData) {
      this.active = 0;
      this.basicForm = JSON.parse(JSON.stringify(basicData));
      this.dialogText = this.posTitle.basicTitle;
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs["toBasicForm"].backgroundUrlList.length == 0 && this.basicForm.backgroundUrl ? this.$refs["toBasicForm"].backgroundUrlList.push({url: this.basicForm.backgroundUrl || ""}) : this.$refs["toBasicForm"].backgroundUrlList;
      });
    },
    /* 基础信息 提交修改 */
    getBasicEditForm() {
      this.$refs["toBasicForm"].$refs["basicForm"].validate((valid) => {
        if (valid) {
          [this.basicForm.province, this.basicForm.city, this.basicForm.area] = this.basicForm.provinceCityArea;
          update(this.basicForm).then((res) => {
            if (res.data.code == '200') {
              this.infoData(this.tenantId);
              this.$message({
                type: "success",
                message: "操作成功!"
              });
              this.dialogVisible = false;
            } else {
              this.$message({
                type: "error",
                message: res.data.message
              });
            }
          }, error => {
            window.console.log(error);
          });
        } else {
          return false;
        }
      });
    },
    /* 点击实名信息 处理回显数据 */
    getMainEdit(mainData) {
      this.active = 1;
      this.$delete(mainData, 'id')
      this.mainForm = JSON.parse(JSON.stringify(mainData));
      this.dialogText = this.posTitle.mainTitle;
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs["toMainForm"].roaLicenseFileList.length == 0 && this.mainForm.roaLicenseImageUrl ? this.$refs["toMainForm"].roaLicenseFileList.push({url: this.mainForm.roaLicenseImageUrl || ""}) : this.$refs["toMainForm"].roaLicenseFileList;
        this.$refs["toMainForm"].roaPositiveFileList.length == 0 && this.mainForm.roaCardPositiveUrl ? this.$refs["toMainForm"].roaPositiveFileList.push({url: this.mainForm.roaCardPositiveUrl || ""}) : this.$refs["toMainForm"].roaPositiveFileList;
        this.$refs["toMainForm"].roaCardBackFileList.length == 0 && this.mainForm.roaCardBackUrl ? this.$refs["toMainForm"].roaCardBackFileList.push({url: this.mainForm.roaCardBackUrl || ""}) : this.$refs["toMainForm"].roaCardBackFileList;
      });
    },
    /* 实名信息 提交修改 */
    getMainEditForm() {
      this.$refs['toMainForm'].$refs['mainForm'].validate((valid) => {
        if (valid) {
          const formData = {
            ...this.mainForm,
            "tenantId": this.oem.tenantId
          }
          authUpdate(formData).then((res) => {
            if (res.data.code == '200') {
              this.infoData(this.tenantId);
              this.$message({
                type: "success",
                message: "操作成功!"
              });
              this.dialogVisible = false;
            } else {
              this.$message({
                type: "error",
                message: res.data.message
              });
            }
          }, error => {
            window.console.log(error);
          });
        } else {
          return false;
        }
      });
    },
    /* 点击结算卡信息 处理回显数据 */
    getCardEdit(cardData) {
      this.dialogVisible = true;
      this.dialogText = this.posTitle.cardTitle;
      this.active = 2;
      this.$delete(cardData, 'id')
      this.cardForm = JSON.parse(JSON.stringify(cardData));
      this.$nextTick(() => {
        this.$refs["toCardForm"].robCardFileList.length == 0 && this.cardForm.robCardPublicImgUrl ? this.$refs["toCardForm"].robCardFileList.push({url: this.cardForm.robCardPublicImgUrl || ""}) : this.$refs["toCardForm"].robCardFileList;
      });
    },
    /* 结算卡信息 提交修改 */
    getCardEditForm() {
      this.$refs['toCardForm'].$refs['cardForm'].validate((valid) => {
        if (valid) {
          const formData = {
            ...this.cardForm,
            "tenantId": this.oem.tenantId
          }
          bankUpdate(formData).then((res) => {
            if (res.data.code == '200') {
              this.infoData(this.tenantId);
              this.$message({
                type: "success",
                message: "操作成功!"
              });
              this.dialogVisible = false;
            } else {
              this.$message({
                type: "error",
                message: res.data.message
              });
            }
          }, error => {
            window.console.log(error);
          });
        } else {
          return false;
        }
      });
    },
    /* 点击支付通道修改 处理回显数据 */
    getAisleEdit(aisleList) {
      this.active = 3;
      this.dialogText = this.posTitle.aisleTitle;
      this.dialogVisible = true;
      getAisleAllList(this.oem.userNo, this.oem.userType).then(res => {
        let aisleData = res.data.data.records;
        aisleData.forEach((item, index) => {
          this.aisleData.push({
            label: item.aisleName,
            key: item.aisleCode,
            pinyin: item.aisleAlias[index]
          });
        });
      });
      aisleList.forEach((item) => {
        this.aisleAllot.push(item.aisleCode);
      });
      // this.$nextTick(() => {
      // });
    },
    /* 支付通道信息 提交修改 */
    getAisleEditForm() {
      if (this.aisleAllot.length > 0) {
        let aisleDatas = {
          "aisleCodes": this.aisleAllot,
          ...this.oem
        }
        aisleUpdate(aisleDatas).then((res) => {
          if (res.data.code == '200') {
            this.infoData(this.tenantId);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.aisleData = [];
            this.aisleAllot = [];
            this.dialogVisible = false;
          } else {
            this.$message({
              type: "error",
              message: res.data.message
            });
          }
        }, error => {
          window.console.log(error);
        });
      } else {
        this.$message({
          type: "warning",
          message: "请先选择通道!"
        });
      }
    },
    /* 点击某项支付通道 处理分润政策回显数据 */
    getPolicyEdit(code) {
      this.active = 4;
      this.aisleCode = code;
      this.policyVisible = true;
    },
    /* 支付通道信息 提交修改 */
    getPolicyEditForm() {
      let policyDatas = {
        "aisleList": this.$refs['toPolicyForm'].data,
        ...this.oem
      }
      oemPolicyUpdate(policyDatas).then((res) => {
        if (res.data.code == '200') {
          this.infoData(this.tenantId);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.policyVisible = false;
        } else {
          this.$message({
            type: "error",
            message: res.data.message
          });
        }
      }, error => {
        window.console.log(error);
      });
    },
  }
};
</script>

<style lang="scss" scoped>
/deep/.el-transfer-panel__list.is-filterable{
  width: 400px !important;
  height: 500px !important;
}
 
/deep/.el-transfer-panel{
  width: 400px !important;
  height: 500px !important;
}
</style>